<template>
  <div class="mapLegend cr-hui3 flex pl-32 pr-32">
    <div class="item flex mr-30">
      <div class="dot1"></div>
      正在使用
    </div>
    <div class="item flex mr-30">
      <div class="dot2"></div>
      在线
    </div>
    <div class="item flex">
      <div class="dot3"></div>
      离线
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.mapLegend {
  box-sizing: border-box;
  position: absolute;
  z-index: 4;
  top: 38px;
  left: 40px;
  background: #fff;
  height: 43px;
  box-shadow: 0px 2px 8px 0px rgba(8, 46, 68, 0.08);
  border-radius: 4px;
  .item {
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      margin-right: 13px;
    }
    .dot1 {
      @extend .dot;
      background: #f7a515;
      border: 2px solid #fce0ad;
    }
    .dot2 {
      @extend .dot;
      background: #03dd9d;
      border: 2px solid #a7f3dd;
    }
    .dot3 {
      @extend .dot;
      background: #ff7d7d;
      border: 2px solid #ffd2d2;
    }
  }
}
</style>